<div class="container">
    <h1>Hero Form</h1>
    <div>{{diagnostic}}</div>
    <form (ngSubmit)="onSubmit(heroForm)" #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" required
            [(ngModel)]="model.name"
            ngControl="name" #name="ngForm" >
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
          Name is required
        </div>
      </div>
      
      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control"
            [(ngModel)]="model.alterEgo">
      </div>
      
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" required
            [(ngModel)]="model.power">
            <option *ngFor="#p of powers" [value]="p">{{p}}</option>
        </select>
      </div>
      
      <!--
      <div [hidden]="tel1.valid || tel1.pristine">
          <div class="tooltip top" role="tooltip" style="opacity:1;">
            <div class="tooltip-arrow"></div>
            <div class="tooltip-inner">
                电话号码格式不正确:11位数字(13/14/15/18开头)
            </div>
          </div>
      </div>
      -->
      <div class="form-group">
        <label for="alterEgo">Tel1</label>
        <input type="tel" class="form-control" #tel1="ngForm"
            [(ngModel)]="model.tel1">
        <div [hidden]="tel1.valid || tel1.pristine" class="alert alert-danger">
          电话号码格式不正确:11位数字(13/14/15/18开头)
        </div>
      </div>
      
      <div class="form-group">
        <label for="alterEgo">Tel2</label>
        <input type="tel" class="form-control" #tel2="ngForm"
            [(ngModel)]="model.tel2">
        <div [hidden]="tel2.valid || tel2.pristine" class="alert alert-danger">
          电话号码格式不正确:11位数字(13/14/15/18开头)
        </div>
      </div>
      
      <div class="form-group">
        <label for="alterEgo">Email</label>
        <input type="email" class="form-control" #email="ngForm"
            [(ngModel)]="model.email">
        <div [hidden]="email.valid || email.pristine" class="alert alert-danger">
          电子邮件格式不正确
        </div>
      </div>

      <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
    </form>
</div>
